<template>
  <div>
    <c-title :hide="false" text="聊天记录"></c-title>
    <div class="flex-col page">
      <div class="flex-row justify-between section">
        <div class="flex-col self-center">
          <div class="flex-row">
            <img class="shrink-0 image" src="https://shops.cg500.com/static/newimg/zcyc.png" />
          </div>
          <span class="text_3 mt-6-5">ai法律咨询平台</span>
        </div>
      </div>
      <div class="flex-col group_2">
        <div class="flex-col justify-start self-end" v-for="(item, index) in textArr" :key="index">
          <span class="font text_5 text-wrapper_3">{{ item.wenti }}</span>
          <span class="font text_55 text-wrapper_33">{{ item.huida }}</span>
        </div>
        <div class="flex-col justify-start self-stretch relative">
          <div class="group_5"></div>
        </div>
      </div>
    </div>
  </div>
  
</template>

<script>
import AichatHistoryController from "./AichatHistoryController";

export default AichatHistoryController;
</script>


<style lang="scss" rel="stylesheet/scss" scoped>
@import "../common/common.css";
.mt-6-5 {
  margin-top: 6px;
}

.page {
  padding-bottom: 14px;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  /* height: 100%; */
}
.section {
  padding: 16px 13px 8px;
  background-image: linear-gradient(-84deg, #e3e4fd 0%, #eaecfe 100%);
}
.image {
  width: 170px;
  height: 53px;
}
.text {
  color: #44a3d7;
  font-size: 18px;
  font-family: HarmonyOS Sans SC;
  font-weight: 900;
  line-height: 18px;
}
.text_3 {
  margin-left: 2px;
  color: #151515;
  font-size: 13px;
  font-family: Source Han Sans SC;
  font-weight: 500;
  line-height: 13px;
}
.group {
  margin-right: 10px;
  margin-top: 6px;
}
.text-wrapper {
  padding: 4px 0;
  background-color: #fdf7e8;
  border-radius: 4px;
  width: 67px;
  height: 20px;
  border: 1px solid #ffffff;
}

.group_2 {
  padding: 17px 15px 200px 17px;
}

.font {
  font-size: 13px;
  font-family: PingFang SC;
  line-height: 13px;
  font-weight: 500;
  color: #1c1c43;
  text-align: left;
}
.text-wrapper_3 {
  padding: 15px;
  margin-top: 10px;
  background-image: linear-gradient(90deg, #9e8df7 0%, #757ef8 100%);
  border-radius: 16px 16px 2px 16px;
}

.text-wrapper_33 {
  padding: 15px;
  margin-top: 10px;
  background-image: linear-gradient(90deg, #ffffff 0%, #ffffff 100%);
  border-radius: 16px 16px 16px 2px;
}
.text_5 {
  margin-left: 15px;
  margin-right: 12px;
  color: #ffffff;
  line-height: 20px;
}
.text_55 {
  margin-left: 15px;
  margin-right: 12px;
  line-height: 20px;
}

.group_5 {
  margin-left: 16px;
  margin-right: 5px;
  line-height: 18px;
}
</style>